//        ___       ___          ___       ___                      ___          ___
//       /  /\     /  /\        /  /\     /  /\         ___        /  /\        /  /\
//      /  /::\   /  /::\      /  /::\   /  /::\       /__/\      /  /:/_      /  /::\
//     /  /:/\:\ /  /:/\:\    /  /:/\:\ /  /:/\:\      \  \:\    /  /:/ /\    /  /:/\:\
//    /  /:/~/://  /:/  \:\  /  /:/~/://  /:/  \:\      \  \:\  /  /:/ /:/_  /  /:/~/:/
//   /__/:/ /://__/:/ \__\:\/__/:/ /://__/:/ \__\:\ ___  \__\:\/__/:/ /:/ /\/__/:/ /:/___
//   \  \:\/:/ \  \:\ /  /:/\  \:\/:/ \  \:\ /  /://__/\ |  |:|\  \:\/:/ /:/\  \:\/:::::/
//    \  \::/   \  \:\  /:/  \  \::/   \  \:\  /:/ \  \:\|  |:| \  \::/ /:/  \  \::/~~~~
//     \  \:\    \  \:\/:/    \  \:\    \  \:\/:/   \  \:\__|:|  \  \:\/:/    \  \:\
//      \  \:\    \  \::/      \  \:\    \  \::/     \__\::::/    \  \::/      \  \:\
//       \__\/     \__\/        \__\/     \__\/          ~~~~      \__\/        \__\/
//
// These are the key variables for styling the popover.
// Just set the variable to none if you don't want that styling.

// KEY VARIABLES
// =============================================================================

// STYLES
$popover-width:                         22em !default;                           // Ideal width of the popover
$popover-max-width:                     90% !default;                            // Best as a % to accommodate smaller viewports
$popover-max-height:                    15em !default;                           // Maximum size of the content area
$popover-color-background:              rgb(250, 250, 250) !default;             // Color of the popover background
$popover-border-radius:                 0.5em !default;                          // Radius of the corners of the popover
$popover-border:                        1px solid rgb(195, 195, 195) !default;   // Border of the popover/ tooltip
$popover-inactive-opacity:              0 !default;                              // Opacity of the popover when instantiated/ deactivating
$popover-active-opacity:                0.97 !default;                           // Opacity of the popover when active
$popover-box-shadow:                    0px 0px 8px rgba(0, 0, 0, 0.3) !default; // Sets the box shadow under the popover/ tooltip
$popover-bottom-position:               auto !default;                           // Sets the bottom position of the popover. Use only when setting positionPopover to false in the script
$popover-left-position:                 auto !default;                           // Sets the left position of the popover. Use only when setting positionPopover to false in the script
$popover-tooltip-size:                  1.3em !default;                          // Sets the side lengths of the tooltip
$popover-scroll-indicator-width:        0.625em !default;                        // The width of the scroll indicator
$popover-scroll-indicator-aspect-ratio: (15/12) !default;                        // The ratio of the height over the width of the scroll indicator
$popover-scroll-indicator-opacity:      0.1 !default;                            // The active opacity of scroll indicators
$popover-initial-transform-state:       scale(0.1) translateZ(0) !default;       // The inital transform state for the popover
$popover-active-transform-state:        scale(1) translateZ(0) !default;         // The transform state for the popover once it is fully activated

// OPTIONAL ELEMENTS
$popover-include-tooltip:               true !default;                           // Adds a tooltip pointing to the footnote button
$popover-include-scroll-indicator:      true !default;                           // Adds an elipsis at the bottom of scrollable popovers
$popover-include-scrolly-fades:         true !default;                           // Fades content in on scrollable popovers
$popover-scroll-indicator-icon:         url("") !default;


// OTHER VARIABLES
// =============================================================================

// POPOVER
$popover-margin-top:                             0.1em !default;
$popover-padding-content-horizontal:             1.3em !default;
$popover-padding-content-top:                    1.1em !default;
$popover-padding-content-bottom:                 1.2em !default;
$popover-z-index:                                10 !default;                         // Set the base so that it's above the other body children
$popover-initial-transform-origin:               50% 0 !default;

// POPOVER CONTENT WRAPPER
$popover-content-color-background:               $popover-color-background !default;
$popover-content-border-radius:                  $popover-border-radius !default;

// OTHER POPOVER ELEMENTS
$popover-tooltip-background:                     $popover-color-background !default;
$popover-tooltip-radius:                         0 !default;
$popover-scroll-indicator-bottom-position:       0.45em !default;
$popover-scrolly-fade-gradient-start-location:   50% !default;
$popover-scroll-indicator-padding:               (($popover-padding-content-horizontal/2) - ($popover-scroll-indicator-width/2)) !default;

// TRANSITIONS
$popover-transition-default-duration:            0.25s !default;
$popover-scroll-indicator-transition-properties: opacity !default;

// Use none for areas you don't want to transition
$popover-transition-properties:                  opacity, transform !default;         // no mixin to do proper prefixing of the transform, so I have to do it manually; see mixin below
$popover-scroll-indicator-transition-properties: opacity !default;
$popover-scroll-up-transition-delay:             0.4s !default;                       // Sets the delay for the transition of the scroll indicator when scrolling upwards
$popover-transition-default-timing-function:     ease !default;





//                     ___                             ___          ___
//       _____        /__/\         ___       ___     /  /\        /__/\
//      /  /::\       \  \:\       /  /\     /  /\   /  /::\       \  \:\
//     /  /:/\:\       \  \:\     /  /:/    /  /:/  /  /:/\:\       \  \:\
//    /  /:/~/::\  ___  \  \:\   /  /:/    /  /:/  /  /:/  \:\  _____\__\:\
//   /__/:/ /:/\:|/__/\  \__\:\ /  /::\   /  /::\ /__/:/ \__\:\/__/::::::::\
//   \  \:\/:/~/:/\  \:\ /  /://__/:/\:\ /__/:/\:\\  \:\ /  /:/\  \:\~~\~~\/
//    \  \::/ /:/  \  \:\  /:/ \__\/  \:\\__\/  \:\\  \:\  /:/  \  \:\  ~~~
//     \  \:\/:/    \  \:\/:/       \  \:\    \  \:\\  \:\/:/    \  \:\
//      \  \::/      \  \::/         \__\/     \__\/ \  \::/      \  \:\
//       \__\/        \__\/                           \__\/        \__\/
//
// These are the key variables for styling the button.
// Just set the variable to none if you don't want that styling.

// KEY VARIABLES
// =============================================================================

$button-height:                         0.95em !default;                         // The total height of the button
$button-width:                          auto !default;                           // The total button width (applies only if $button-apply-dimensions is true)
$button-inner-circle-size:              0.25em !default;                         // Total height/width of the ellipsis circles
$button-border-radius:                  0.3em !default;                          // Border radius on the button itself
$button-left-margin:                    0.2em !default;                          // Margin between the button and the text to its left
$button-right-margin:                   0.1em !default;                          // Margin between the button and the text to its right
$button-vertical-adjust:                -0.1em !default;                         // Pushes the buttons along the vertical axis to align it with text as desired
$button-inner-circle-left-margin:       1*$button-inner-circle-size !default;    // Space between the ellipsis circles

$button-color:                          rgb(110, 110, 110) !default;             // Background color of the button
$button-hovered-color:                  $button-color !default;                  // Background color of the button when being hovered
$button-activating-color:               $button-color !default;                  // Background color of the button when being clicked
$button-active-color:                   $button-color !default;                  // Background color of the button when active
$button-standard-opacity:               0.2 !default;                            // Opacity for when the button is just sittin' there
$button-hovered-opacity:                0.5 !default;                            // Opacity for when the button is being hovered over
$button-activating-opacity:             $button-hovered-opacity !default;        // Opacity for when the button is being clicked
$button-active-opacity:                 1 !default;                              // Opacity for when the button is active
$button-active-style-delay:             0.1s !default;                           // Delay before applying .active styles; this can be used to match to the popover activation transition

$button-inner-circle-color:             white !default;                          // Background color of the ellipsis circle
$button-inner-circle-border:            none !default;                           // Border of the ellipsis circle


// OTHER VARIABLES
// =============================================================================

$button-total-padding:              $button-height - $button-inner-circle-size !default;
$button-per-side-padding:           0.5*$button-total-padding !default;
$button-transition-properties:      background-color !default;
